<template>
  <div class="settings-page">
    <van-nav-bar
      title="设置"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="settings-content">
      <van-cell-group title="账号设置" inset>
        <van-cell title="个人资料" is-link @click="goToProfile" />
        <van-cell title="账号安全" is-link @click="goToSecurity" />
        <van-cell title="隐私设置" is-link @click="goToPrivacy" />
      </van-cell-group>
      
      <van-cell-group title="通用设置" inset>
        <van-cell title="主题设置">
          <template #right-icon>
            <van-switch
              v-model="isDarkTheme"
              size="24"
              @change="toggleTheme"
            />
          </template>
        </van-cell>
        <van-cell title="字体大小" is-link @click="showFontSizePicker = true" />
        <van-cell title="清除缓存" is-link @click="clearCache" />
      </van-cell-group>
      
      <van-cell-group title="关于" inset>
        <van-cell title="版本信息" value="v1.0.0" />
        <van-cell title="用户协议" is-link @click="goToUserAgreement" />
        <van-cell title="隐私政策" is-link @click="goToPrivacyPolicy" />
        <van-cell title="关于我们" is-link @click="goToAbout" />
      </van-cell-group>
      
      <div class="logout-button">
        <van-button block type="danger" @click="handleLogout">退出登录</van-button>
      </div>
    </div>
    
    <!-- 字体大小选择器 -->
    <van-popup v-model:show="showFontSizePicker" position="bottom">
      <van-picker
        :columns="fontSizeColumns"
        @confirm="onFontSizeConfirm"
        @cancel="showFontSizePicker = false"
        show-toolbar
        title="选择字体大小"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'
import { useUserStore } from '../../../store/user'

const router = useRouter()
const userStore = useUserStore()

// 主题设置
const isDarkTheme = computed(() => userStore.preferences.theme === 'dark')

// 字体大小选择器
const showFontSizePicker = ref(false)
const fontSizeColumns = [
  { text: '小', value: 'small' },
  { text: '默认', value: 'default' },
  { text: '大', value: 'large' },
  { text: '特大', value: 'xlarge' }
]

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 切换主题
const toggleTheme = (value) => {
  const newTheme = value ? 'dark' : 'light'
  userStore.updateTheme(newTheme)
  showToast(`已切换到${newTheme === 'dark' ? '深色' : '浅色'}主题`)
}

// 字体大小确认
const onFontSizeConfirm = (value) => {
  showToast(`已设置字体大小为: ${value.text}`)
  showFontSizePicker.value = false
}

// 清除缓存
const clearCache = () => {
  showDialog({
    title: '清除缓存',
    message: '确定要清除应用缓存吗？',
    showCancelButton: true
  }).then(() => {
    // 实际项目中应该清除缓存
    showToast('缓存已清除')
  }).catch(() => {
    // 取消操作
  })
}

// 退出登录
const handleLogout = () => {
  if (!userStore.isLoggedIn) {
    showToast('您尚未登录')
    return
  }
  
  showDialog({
    title: '退出登录',
    message: '确定要退出登录吗？',
    showCancelButton: true
  }).then(() => {
    userStore.logout()
    showToast('已退出登录')
    router.replace('/')
  }).catch(() => {
    // 取消操作
  })
}

// 页面跳转
const goToProfile = () => {
  showToast('个人资料功能开发中')
}

const goToSecurity = () => {
  showToast('账号安全功能开发中')
}

const goToPrivacy = () => {
  showToast('隐私设置功能开发中')
}

const goToUserAgreement = () => {
  showToast('用户协议功能开发中')
}

const goToPrivacyPolicy = () => {
  showToast('隐私政策功能开发中')
}

const goToAbout = () => {
  showToast('关于我们功能开发中')
}
</script>

<style lang="scss" scoped>
.settings-page {
  min-height: 100vh;
  background-color: var(--background-color);
  
  .settings-content {
    padding: 16px;
    
    .van-cell-group {
      margin-bottom: 16px;
    }
    
    .logout-button {
      margin-top: 32px;
    }
  }
}
</style> 